<template>
  <div class="form">
    <el-form :label-width="labelWidth">
      <el-row>
        <template v-for="formItem in formItems" :key="formItem.field">
          <el-col :span="colLayout.span">
            <el-form-item :label="formItem.label" :style="itemStyle" v-if="!formItem.isHidden">
              <template v-if="formItem.type === 'input'">
                <el-input :placeholder="formItem.placeholder"
                          :model-value="modelValue[formItem.field]"
                          @update:model-value="handleDataChange($event, formItem.field)"
                          ></el-input>
              </template>
              <template v-if="formItem.type === 'password'">
                <el-input :placeholder="formItem.placeholder"
                          :model-value="modelValue[formItem.field]"
                          show-password
                          @update:model-value="handleDataChange($event, formItem.field)"
                          ></el-input>
              </template>
              <template v-if="formItem.type === 'select'">
                <el-select 
                  :placeholder="formItem.placeholder"
                  style="width:100%"
                  :model-value="modelValue[formItem.field]"
                  @update:model-value="handleDataChange($event, formItem.field)"
                  >
                  <el-option
                    v-for="option in formItem.options"
                    :key="option.value" 
                    :label="option.title"
                    :value="option.value">
                  </el-option>
                </el-select>
              </template>
              <template v-if="formItem.type === 'datepicker'">
                <el-date-picker 
                  :model-value="modelValue[formItem.field]"
                  @update:model-value="handleDataChange($event, formItem.field)"
                  type="daterange"
                  is-range
                  range-separator="To"
                  v-bind="formItem.otherOptions"
                >
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>

    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import {IFormItem} from './type'
const props = defineProps({
  labelWidth:{
    type:String,
    default:'120px'
  },
  colLayout:{
    type:Object,
    default:() => ({
      span:8
    })
  },
  formItems:{
    type:Array as PropType<IFormItem[]>,
    required:true
  },
  itemStyle:{
    type:Object,
    default:() => ({
      padding:'10px 40px'
    })
  },
  modelValue:{
    type:Object,
    required:true
  }
})

const emits = defineEmits(['update:modelValue'])
const handleDataChange = (value:any,field:string) => {
  emits('update:modelValue',{...props.modelValue,[field]:value})
}
</script>

<style scoped>

</style>t